<!DOCTYPE html>
<html>
	<head>
        {% load static %}
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap-theme.min.css" %}"/>
		<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}"/>
		<link rel="stylesheet" type="text/css" href="{% static "css/comic.css" %}"/>
		<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Checkbox.css">
		<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Switch.css">
		<script type="text/javascript" src="{% static "js/jquery-1.12.4.min.js" %}"></script>
		<script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"></script>
		<script type="text/javascript">
			$(function(){
				var switch01 = $('#switch')
				var menu = $('.menu')
				var body = $('body')
				$(switch01).click(function(){
					if(menu.css('background-color') == 'rgb(30, 30, 31)'){
						$(menu).css('background-color','#ffffff')
						$(body).css('background-color','#ececec')
					}
					else{
						$(menu).css('background-color','#1E1E1F')
						$(body).css('background-color','#272727')
					}
				})
			})
		</script>
	</head>
	<body>
		<div class="menu">
			<div class="title"><a href="/index">首页</a>&nbsp;&nbsp;<span>&gt;</span>&nbsp;&nbsp;<a href="/single/{{ comic_book.id }}">{{ comic_book.book_name }}</a>&nbsp;&nbsp;<span>&gt;</span>&nbsp;&nbsp;<span>{{ chapter.catalog_title }}</span></div>
			{% if request.user.id == None %}
			<div class="login" data-toggle="modal" data-target="#login"><a href="#">登 录</a></div>
			<div class="register" data-toggle="modal" data-target="#register"><a href="#">注 册</a></div>
			{% else %}
			<div class="logout" data-toggle="modal" data-target="#register"><a href="/users/logout">退 出</a></div>
			<div class="login-msg" data-toggle="modal"><a href="#">欢迎：{{ request.user }}</a></div>
			{% endif %}

		</div>
		<!--登录弹框-->
		<div class="modal" id="login">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3>登录</h3>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" method="post" action="/users/login" id="form-login">
						  <div class="form-group">
						    <label for="inputEmail3" class="col-sm-2 control-label">账号</label>
						    <div class="col-sm-10">
						      <input type="text" class="form-control" id="inputEmail3" placeholder="账号" name="username">
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-10">
						      <input type="password" class="form-control" id="inputPassword3" placeholder="密码" name="password">
						    </div>
						  </div>
						  <div class="form-group">
						    <div class="col-sm-offset-2 col-sm-10">
						      <div class="checkbox">
						        <label>
						          <input type="checkbox" name="remember"> 记住我
						        </label>
						      </div>
						    </div>
						  </div>
						  <div class="form-group">
						    <div class="col-sm-offset-2 col-sm-10">
						      <button type="submit" class="btn btn-primary" id="login-button">登 陆</button>
						      <button type="btn" class="btn btn-default" data-dismiss="modal">取 消</button>
						    </div>
						  </div>
					</form>
				</div>
				<div class="modal-footer"></div>
			</div>
		</div>
	</div>
		<!--注册弹框-->
		<div class="modal" id="register">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3>注册</h3>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" method="post" action="/users/register" id="user-register">
                         <div class="form-group">
						 	<label for="inputPassword3" class="col-sm-2 control-label">账号</label>
						    <div class="col-sm-10">
						    		<input type="text" class="form-control" id="inputPassword3" placeholder="账号" name="username">
						    </div>
						 </div>
						 <div class="form-group">
						 	<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
						   	<div class="col-sm-10">
						     	<input type="text" class="form-control" id="inputEmail3" placeholder="请输入邮箱" name="email">
						   	</div>
						 </div>
						 <div class="form-group">
						 	<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-10">
						    		<input type="password" class="form-control" id="inputPassword3" placeholder="密码" name="password">
						    </div>
						 </div>
						 <div class="form-group">
						 	<label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
						    <div class="col-sm-10">
						    		<input type="password" class="form-control" id="inputPassword3" placeholder="确认密码" name="cpassword">
						    </div>
						 </div>
						 <div class="form-group">
						    <div class="col-sm-offset-2 col-sm-10">
						      <div class="checkbox">
						        <label>
						          <input type="checkbox" name="read"> 已阅读注册需知
						        </label>
						      </div>
						    </div>
						 </div>
						 <div class="form-group">
						    <div class="col-sm-offset-2 col-sm-10">
						      <button type="submit" class="btn btn-primary">注 册</button>
						      <button type="btn" class="btn btn-default" data-dismiss="modal">取 消</button>
						    </div>
						 </div>
					</form>
				</div>
				<div class="modal-footer"></div>
			</div>
		</div>
	</div>
		<di>
			<input type="checkbox" id="switch"><label class="ui-switch" for="switch"></label>
		</di>
		<!--分页-->
		<nav aria-label="Page navigation">
			<ul class="pagination">
                {% if page.has_previous %}
                <li><a href="/comic/{{ chapter.id }}/show{{ page.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
				{% else %}
                <li><a href="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                {% endif %}

                {% for pnum in page.paginator.page_range %}
                <li><a href="/comic/{{ chapter.id }}/show{{ pnum }}">{{ pnum }}</a></li>
                {% endfor %}

                {% if page.has_next %}
                <li><a href="/comic/{{ chapter.id }}/show{{ page.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                {% else %}
                <li><a href="" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                {% endif %}
			</ul>
		</nav>
        {% for comicimg in page.object_list %}
		<div class="comic-img clearfix">

			<img src="{{ comicimg.detail_content }}"/>

		</div>
        {% endfor %}
{#		<dl class="history">#}
{#			<dt>历史浏览记录：</dt>#}
{#			{% for comic in comics_list %}#}
{#			<dd><img src="{{ comic.book_img }}" alt=""></dd>#}
{#			{% endfor %}#}
{#		</dl>#}
        <nav aria-label="..." class="change_chapter">
            <ul class="pager">
                <li><a href="/comic/{{ pre_chapter.id }}/show">上一话</a></li>
                <li><a href="/comic/{{ next_chapter.id }}/show">下一话</a></li>
            </ul>
        </nav>
		<nav aria-label="Page navigation">
			<ul class="pagination">
				{% if page.has_previous %}
                <li><a href="/comic/{{ chapter.id }}/show{{ page.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
				{% else %}
                <li><a href="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                {% endif %}

                {% for pnum in page.paginator.page_range %}
                <li><a href="/comic/{{ chapter.id }}/show{{ pnum }}">{{ pnum }}</a></li>
                {% endfor %}

                {% if page.has_next %}
                <li><a href="/comic/{{ chapter.id }}/show{{ page.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                {% else %}
                <li><a href="" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                {% endif %}
			</ul>
		</nav>
		<script src="//qidian.gtimg.com/c/=/lulu/theme/peak/js/common/ui/Radio.js,/lulu/theme/peak/js/common/ui/Checkbox.js"></script>
	</body>
</html>
